<template>
  <div class="c-bg-sgray">
    <div class="c-bg-white" v-if="roleInfo && roleInfo.answerId">
      <img class="c-w100 c-h" src="../../../assets/i/wap/qa/qa_bg.jpg" alt="">
      <div class="c-flex-column">
        <div @click="isShow = !isShow">
          <div class="c-flex-row c-ph24">
            <div class="c-ww140 c-hh140 c-brp50 c-p c-bd2-white">
              <img class="c-w100 c-h c-brp50" v-lazy="roleInfo.avatar || require('@/assets/defult_head.png')" alt="">
            </div>
            <div class="c-ml10 c-flex-column c-justify-sb c-mt6">
              <div class="c-flex-row c-p c-maxw c-aligni-center">
                <span class="c-fs24 c-fc-xblack c-fw600">{{roleInfo.name}}</span>
              </div>
              <div class="c-flex-row" v-if="(roleInfo.price * 1 > 0 && ((roleInfo.vipDiscountType == 1 && roleInfo.vipDiscount < 100) || (roleInfo.vipDiscountType == 2 && Number(roleInfo.vipDiscountPrice) < Number(roleInfo.price))) || (roleInfo.price * 1 > 0 && ((roleInfo.vipDiscountType == 1 && roleInfo.svipDiscount < 100) || (roleInfo.vipDiscountType == 2 && Number(roleInfo.svipDiscountPrice) < Number(roleInfo.price)))))">
                <div v-if="roleInfo.price * 1 > 0 && ((roleInfo.vipDiscountType == 1 && roleInfo.vipDiscount < 100) || (roleInfo.vipDiscountType == 2 && Number(roleInfo.vipDiscountPrice) < Number(roleInfo.price)))" class="c-fs20 c-ph10 bg-FF300C-10 c-fc-xmlred c-br8 c-pv4 c-mr20">
                  <span>VIP<span v-if="(roleInfo.vipDiscountType == 1 && roleInfo.vipDiscount > 0) || (roleInfo.vipDiscountType == 2 && Number(roleInfo.vipDiscountPrice) > 0)">{{'￥' | iosPriceFilter('Question')}}</span>{{(roleInfo.vipDiscountType == 1 && roleInfo.vipDiscount == 0) || (roleInfo.vipDiscountType == 2 && Number(roleInfo.vipDiscountPrice) == 0) ? '免费' : roleInfo.vipDiscountType == 2 ? Number(roleInfo.vipDiscountPrice).toFixed(2) : Number(roleInfo.vipDiscount * roleInfo.price / 100).toFixed(2)}}</span>
                </div>
                <div v-if="roleInfo.price * 1 > 0 && ((roleInfo.vipDiscountType == 1 && roleInfo.svipDiscount < 100) || (roleInfo.vipDiscountType == 2 && Number(roleInfo.svipDiscountPrice) < Number(roleInfo.price)))" class="c-fs20 c-ph10 bg-FF300C-10 c-fc-xmlred c-br8 c-pv4">
                  <span>SVIP<span v-if="(roleInfo.vipDiscountType == 1 && roleInfo.svipDiscount > 0) || (roleInfo.vipDiscountType == 2 && Number(roleInfo.svipDiscountPrice) > 0)">{{'￥' | iosPriceFilter('Question')}}</span>{{(roleInfo.vipDiscountType == 1 && roleInfo.svipDiscount == 0) || (roleInfo.vipDiscountType == 2 && Number(roleInfo.svipDiscountPrice) == 0) ? '免费' : roleInfo.vipDiscountType == 2 ? Number(roleInfo.svipDiscountPrice).toFixed(2) : Number(roleInfo.svipDiscount * roleInfo.price / 100).toFixed(2)}}</span>
                </div>
              </div>
              <div class="c-flex-row c-aligni-center">
                <div class="theme-fc theme-bg-10 c-fs20 c-br6 c-ph8 c-pv4 c-textAlign-c c-ws-n c-maxw200 c-text-ellipsis1">{{roleInfo.honor}}</div>
                <div class="c-fc-gray c-fs20 c-ml10">
                  <span v-if="roleInfo.price * 1 > 0">{{'￥' | iosPriceFilter('Question')}}</span>{{roleInfo.price * 1 > 0 ? roleInfo.price + `${questionCustom == 1 ? '预约' : '提问'}` : `免费${questionCustom == 1 ? '预约' : '提问'}`}}
                </div>
              </div>
            </div>
          </div>
          <div class="c-flex-row c-aligni-center c-mt30 c-ph24" v-if="roleInfo.intro">
            <div class="c-text-ellipsis1 c-p c-fs24 c-fc-gray c-flex-grow1">
              {{roleInfo.intro}}
            </div>
            <div class="iconfont c-fs18 c-fc-gray">
              &#xe635;
            </div>
          </div>
        </div>
        <div class="c-bg-sgray c-flex-row c-justify-sa c-aligni-center c-mt30 c-mh24 c-pv20 c-br20" >
          <div class="c-textAlign-c">
            <div class="c-fs28 c-fc-xblack c-fw600">{{roleInfo.statusCount.all|formatTenThousand}}</div>
            <div class="c-fs20 c-fc-gray c-mt4">总提问</div>
          </div>
          <div class="c-textAlign-c">
            <div class="c-fs28 c-fc-xblack c-fw600">{{roleInfo.statusCount.todayCount|formatTenThousand}}</div>
            <div class="c-fs20 c-fc-gray c-mt4">今日回答</div>
          </div>
          <div class="c-textAlign-c">
            <div class="c-fs28 c-fc-xblack c-fw600">{{roleInfo.statusCount.answerCount|formatTenThousand}}</div>
            <div class="c-fs20 c-fc-gray c-mt4">已回复</div>
          </div>
          <div class="c-textAlign-c">
            <div class="c-fs28 c-fc-xblack c-fw600">{{roleInfo.statusCount.noAnswerCount|formatTenThousand}}</div>
            <div class="c-fs20 c-fc-gray c-mt4">未回复</div>
          </div>
          <div class="c-textAlign-c">
            <div class="c-fs28 c-fc-xblack c-fw600">{{roleInfo.statusCount.refundCount|formatTenThousand}}</div>
            <div class="c-fs20 c-fc-gray c-mt4">已过期</div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-bg-white c-ph24 c-pt10">
      <my-small-tabbar :styleType="2" :isNew="true" :fontSet="{defaultColor:'c-fc-sblack',activeColor:'c-fw500'}" :tabList="tabList" :tabIndex="type" @changeTab="changeType"></my-small-tabbar>
    </div>
    <!-- 问我的 START-->
    <div class="c-flex-row c-justify-sb c-ph24 c-pt30 c-fc-xblack c-p">
      <div class="c-fs28 c-fw600">相关问题</div>
      <div class="c-fs22 c-fc-sblack c-flex-row c-flex-center c-p c-hh44 c-bg-white c-ph20 c-br30" v-if="type != 2" @click="clickShowPicker">
        {{ typeData.find((item, index) => index == primaryTypeValue).name }}
        <i class="iconfont c-fc-gray c-fs22" :class="isShowType ? 'c-rotate270 ':'c-rotate90'">&#xe635;</i>
      </div>
    </div>
    <div v-if="type == 0">
      <qa-list :key="'qaList' + type" :list="askMeList" :fromType="1" class="c-bg-sgray c-ph24"></qa-list>
      <loading-status-tem :dataStatus="askStatus" :noDataText="'暂无相关记录'"></loading-status-tem>
    </div>
    <!-- 我问的 START-->
    <div v-if="type == 1">
      <qa-list :key="'qaList' + type" :list="myAskList" :fromType="2" class="c-bg-sgray c-ph24"></qa-list>
      <loading-status-tem :dataStatus="myStatus" :noDataText="'暂无相关记录'"></loading-status-tem>
    </div>
    <!-- 我围观的 START-->
    <div v-if="type == 2">
      <qa-list :key="'qaList' + type" :list="myCircuseeList" :fromType="3" class="c-bg-sgray c-ph24"></qa-list>
      <loading-status-tem :dataStatus="myCircuseeStaus" :noDataText="'暂无相关记录'"></loading-status-tem>
    </div>
    <div class="c-maxw640 c-w100 c-hh80 c-lh80 c-ph24 c-pf c-p-b0 c-pz1 c-flex-row c-justify-sa c-aligni-center c-fs24 c-fc-xblack c-bg-white c-pv30 c-box-shadow3">
      <div class="c-textAlign-c" @click="clickGoQA">
        <span class="iconfont theme-fc">&#xe6c2;</span>
        {{questionCustom == 1 ? '预约' : '问答'}}专区
      </div>
    </div>
    <cj-popup v-model="isShow" round position="bottom" @closed="closeModal" class="changeline-popup personInfo">
      <div class="c-w100 c-flex-column c-pz1 c-pb20 c-br-tl20 c-br-tr20 c-p" v-if="roleInfo">
        <div class="c-pv20 c-p c-bg-white">
          <div class="c-fs28 c-fw600 c-textAlign-c">个人简介</div>
          <div class="iconfont c-fs20 c-fc-gray c-pa  c-p-r24 c-p-t30 c-pz10" @click="closeModal">&#xe61b;</div>
        </div>
        <div class="c-ph24 c-content-scroll c-maxh800">
          <div class="c-br20 c-ph24 c-pt30 c-pb48 c-bg-white c-mt30">
            <div class="c-ww100 c-hh100 c-brp50 c-center">
              <img class="c-w100 c-h c-brp50" v-lazy="roleInfo.avatar || require('@/assets/defult_head.png')" alt="">
            </div>
            <div class="c-fs30 c-fc-xblack c-fw600 c-textAlign-c c-mt6">{{roleInfo.name}}</div>
            <div class="c-mt30 c-fs24 c-fw600 c-fc-xblack">答主头衔</div>
            <div class="c-fs24 c-mt10 c-fc-gray">{{roleInfo.honor}}</div>
            <div class="c-mt30 c-fs24 c-fw600 c-fc-xblack">答主简介</div>
            <div class="c-fs24 c-mt10 c-fc-gray">{{roleInfo.intro}}</div>
          </div>
          <div class="c-br20 c-ph24 c-pt30 c-pb28 c-bg-white c-mt30">
            <div class="c-fs24 c-fw600 c-fc-xblack">问答服务</div>
            <div class="c-flex-row c-aligni-center c-mt24">
              <div class="c-flex-row c-aligni-center">
                <div class="c-fs24 c-fc-gray">
                  总回答
                </div>
                <div class="theme-fc c-fs28 c-ml10">{{roleInfo.statusCount.solutionCount|formatTenThousand}}</div>
              </div>
              <div class="c-flex-row c-aligni-center c-ml60">
                <div class="c-fs24 c-fc-gray">
                  今日回答
                </div>
                <div class="theme-fc c-fs28 c-ml10">{{roleInfo.statusCount.todayCount|formatTenThousand}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </cj-popup>
    <my-picker :showPicker="showPicker" :dataList="typeData" :activeIndex="primaryTypeValue" @confirmType="changeStudyType" @hidePicker="hidePicker"></my-picker>
  </div>
</template>

<script>
import MySmallTabbar from "@/components/templates/common/MySmallTabbar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import myPicker from "@/components/homePage/qa/myPicker.vue";
import QaList from "@/components/templates/qa/qaList.vue";
import { utilJs } from "@/utils/common.js";
const PAGE_SIZE = 10;
let myAskIndex = 1;
let askMeIndex = 1;
let myCircuseeIndex = 1;
export default {
  name: "MyQA",
  components: {
    loadingStatusTem,
    MySmallTabbar,
    QaList,
    myPicker
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
      problemStatus: JSON.parse(localStorage.getItem("questionInfo")),
      questionCustom: localStorage.getItem("questionCustom"), //定制阿卡西线上学院
      type: 0, //tab
      roleInfo: null,
      totalAskMe: 0,
      totalMyAsk: 0,
      totalMyCircusee: 0,
      askMeList: [],
      myAskList: [],
      myCircuseeList: [],
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      tabList: [
        {title: '', index: 1},
        {title: '', index: 2}
      ],
      isShowMore: false,
      isShowTip: false,
      uMobile: localStorage.getItem("uMobile"),
      askMeStatus: false,
      myAskStatus: false,
      circuseeStatus: false,
      expande: false, //展开 收起
      needShowExpande: false, //超3行显省略号和文字
      askStatus: 'HAS_MORE_DATA',
      myStatus: 'HAS_MORE_DATA',
      myCircuseeStaus: 'HAS_MORE_DATA',
      typeData: [
        {name: '全部'},
        {name: '已回复'},
        {name: '未回复'},
        {name: '已过期'}
      ],
      primaryTypeValue: 0, // type值
      showPicker: false,
      status: '',
      isAnswer: false, //是否是答主
      isShow:false
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      if (from.path != "/homePage/login/bindMobile") {
        // 不是从绑定手机号页面来
        // if (localStorage.getItem('enableBindPhoneEnterBeforeInQuestion') == 1 && localStorage.getItem('uMobile') == '') {
        //   vm.$routerGo(vm, "push", {
        //     path: '/homePage/login/bindMobile'
        //   })
        // }
      } else {
        // 从绑定手机页面来,手机号为空 即返回
        // if (localStorage.getItem('enableBindPhoneEnterBeforeInQuestion') == 1 && localStorage.getItem('uMobile') == '') {
        //   window.history.go(-1)
        // } else {
          // 从绑定手机页面来,手机号存在 即绑定成功 跳问答专区
          vm.$routerGo(vm, "push", {
            path: '/homePage/qa/myQA'
          })
      }
    });
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  computed: {},
  methods: {
    closeModal() {
      this.isShow = false
    },
    changeType(type) {
      window.scroll(0, 0);
      this.type = type;
      if (this.type == 0) {
        askMeIndex = 1;
        this.status = "";
        this.primaryTypeValue = 0;
        this.askMeStatus = true;
        this.myAskStatus = false;
        this.circuseeStatus = false;
         this.getAskMeList();
      } else if (this.type == 1) {
        myAskIndex = 1;
        this.status = "";
        this.primaryTypeValue = 0;
        this.askMeStatus = false;
        this.myAskStatus = true;
        this.circuseeStatus = false;
        this.getMyAskList();
      } else {
        myCircuseeIndex == 1
        this.askMeStatus = false;
        this.myAskStatus = false;
        this.circuseeStatus = true;
        this.getMyCircuseeList();
      }
    },
    clickShowPicker() {
      this.showPicker = true;
    },
    hidePicker() {
      this.showPicker = false;
    },
    changeStudyType(val) {
      this.primaryTypeValue = val;
      this.showPicker = false;
      const statusMap = {
        0: '', // 全部
        1: 2, // 已恢复
        2: 3, // 未回复
        3: -1, // 已过期
      }
      this.status = statusMap[val];
      if (this.type == 0) {
        askMeIndex = 1;
        this.getAskMeList();
      } else if (this.type == 1) {
        myAskIndex = 1;
        this.getMyAskList();
      }
    },
    //分享
    wechatShare: function () {
      let questionInfo = JSON.parse(
        window.localStorage.getItem("questionInfo")
      );
      let title = questionInfo.title;
      let shareImg = questionInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/qa/answerLord?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = questionInfo.describe;
      utilJs.wechatConfig(
        shareUrl,
        title,
        shareImg,
        shareDesc,
        function () { },
        true
      );
    },
    //手机端分享
    appShare() {
      let questionInfo = JSON.parse(
        window.localStorage.getItem("questionInfo")
      );
      let title = questionInfo.title;
      let shareImg = questionInfo.cover;
      let shareUrl = `${window.location.href.split("#")[0]}#/homePage/qa/answerLord?refereeId=${localStorage.getItem("userId")}`;
      let shareDesc = questionInfo.describe;
      utilJs.appShareTrue(title, shareImg, shareUrl, shareDesc);
    },
    //点击问答专区
    clickGoQA() {
      this.$routerGo(this, "push", {
        path: "/homePage/qa/answerLord"
      });
    },
    //获取我围观的列表
    getMyCircuseeList() {
      if (this.myCircuseeStaus == 'LOADING') {
        return;
      }
      this.myCircuseeStaus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}question/getCircuseeList?limit=${PAGE_SIZE}&page=${myCircuseeIndex}`, res => {
        if (myCircuseeIndex == 1) {
          this.myCircuseeList = res.data;
        } else {
          let list = res.data;
          this.myCircuseeList = this.myCircuseeList.concat(list);
        }
        this.totalMyCircusee = res.total * 1 > 99 ? "99+" : res.total * 1;
        this.getTabList();
        if (res.to * 1 == res.total * 1) {
          this.myCircuseeStaus = myCircuseeIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.myCircuseeStaus = 'HAS_MORE_DATA';
          myCircuseeIndex++;
        }
      });
    },
    //获取我问的列表
    getMyAskList() {
      if (this.myStatus == 'LOADING') {
        return;
      }
      this.myStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}question/getCenterQuestionList?type=2&limit=${PAGE_SIZE}&page=${myAskIndex}&status=${this.status}`, res => {
        if (myAskIndex == 1) {
          this.myAskList = res.data;
        } else {
          this.myAskList = this.myAskList.concat(res.data);
        }
        this.totalMyAsk = res.total * 1 > 99 ? "99+" : res.total * 1;
        this.getTabList();
        if (res.to * 1 == res.total * 1) {
          this.myStatus = myAskIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.myStatus = 'HAS_MORE_DATA';
          myAskIndex++;
        }
      });
    },
    //获取问我的列表
    getAskMeList() {
      if (this.askStatus == 'LOADING') {
        return;
      }
      this.askStatus = 'LOADING';
      utilJs.getMethod(`${global.apiurl}question/getCenterQuestionList?type=1&limit=${PAGE_SIZE}&page=${askMeIndex}&status=${this.status}`, res => {
        if (askMeIndex == 1) {
          this.askMeList = res.data;
        } else {
          this.askMeList = this.askMeList.concat(res.data);
        }
        this.totalAskMe = res.total * 1 > 99 ? "99+" : res.total * 1;
        this.getTabList();
        if (res.to * 1 == res.total * 1) {
          this.askStatus = askMeIndex == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.askStatus = 'HAS_MORE_DATA';
          askMeIndex++;
        }
      });
    },
    //获取头部tablist
    getTabList() {
      if (this.roleInfo && this.roleInfo.answerId) {
        this.isAnswer = true;
        this.tabList[0].title = `${this.questionCustom == 1 ? '预约我的' : '问我的'} (${this.totalAskMe})`;
        this.tabList[1].title = `${this.questionCustom == 1 ? '我预约的' : '我问的'} (${this.totalMyAsk})`;
        this.tabList[2].title = `我围观的 (${this.totalMyCircusee})`;
        if (this.myAskStatus) {
          this.type = 1
        } else if (this.circuseeStatus) {
          this.type = 2
        } else {
          this.type = 0;
        }
      } else {
        this.isAnswer = false;
        this.tabList[0].title = `${this.questionCustom == 1 ? '我预约的' : '我问的'} (${this.totalMyAsk})`;
        this.tabList[1].title = `我围观的 (${this.totalMyCircusee})`;
        // this.type = this.$route.query.userType == 1 ? 1 : 2;
      }
    },
    //获取自己的答主信息
    getSelfAnswerInfo() {
      utilJs.getMethod(global.apiurl + "question/getSelfAnswerInfo", res => {
        if (res && res.answerId) {
          this.roleInfo = res;
          let item = {title: '', index: 0};
          this.tabList.unshift(item);
          this.getAskMeList();
        } else {
          this.type = this.$route.query.userType == 1 ? 1 : 2;
        }
      });
    },
    watchResize() {
      //实时变化的窗口高度
      this.showHeight = document.documentElement.clientHeight;
    },
    initData() {
      myAskIndex = 1;
      askMeIndex = 1;
      this.status = '';
      myCircuseeIndex = 1;
      this.primaryTypeValue = 0;
      this.askStatus = 'HAS_MORE_DATA';
      this.myStatus = 'HAS_MORE_DATA';
      this.myCircuseeStaus = 'HAS_MORE_DATA';
      this.roleInfo = null;
      this.isShowMore = false;
      this.isShowTip = false;
      this.expande = false;
      this.needShowExpande = false;
      this.isAnswer = false;
      this.tabList = [{title: '', index: 1}, {title: '', index: 2}];
      this.askMeList = [];
      this.myAskList = [];
      this.myCircuseeList = [];
      this.getMyCircuseeList();
      this.getMyAskList();
      this.getSelfAnswerInfo();
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.type == 1) {
          if (this.myStatus == 'HAS_MORE_DATA' && this.myAskList.length > 0) {
            this.getMyAskList();
          }
        } else if (this.type == 2) {
          if (this.myCircuseeStaus == 'HAS_MORE_DATA' && this.myCircuseeList.length > 0) {
            this.getMyCircuseeList();
          }
        } else {
          if (this.askStatus == 'HAS_MORE_DATA' && this.askMeList.length > 0) {
            this.getAskMeList();
          }
        }
      });
    },
  },
  activated() {
    if (this.questionCustom == 1) {
      setDocumentTitle("我的预约");// eslint-disable-line
    } else {
      setDocumentTitle("我的问答");// eslint-disable-line
    }
    if ((localStorage.getItem('fromAnswerDetail') == 1 || localStorage.getItem('fromCircuseeList') == 1 || localStorage.getItem('fromMemberIndex') == 1) || ( utilJs.checkNeedInitData(this.askMeList) && utilJs.checkNeedInitData(this.myAskList) && utilJs.checkNeedInitData(this.myCircuseeList))) {
      this.initData()
      localStorage.removeItem('fromMemberIndex')
      localStorage.removeItem('fromAnswerDetail')
      localStorage.removeItem('fromCircuseeList')
    }
    if ((this.problemStatus && this.problemStatus.status == -1) || (this.companyAuth && this.companyAuth.enableQuestionModule == -1)) {
      this.$routerGo(this, "replace", {
        path: "/error/emptyPage",
        query: {
          info: "问答已下架"
        }
      });
    }
    this.askMeStatus = false;
    this.myAskStatus = false;
    this.circuseeStatus = false;
    this.wechatShare();
    // window.onresize监听页面高度的变化
    if (utilJs.isAdnroidBrower()) {
      window.addEventListener('resize', this.watchResize);
    }
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    if (utilJs.isAdnroidBrower()) {
      window.removeEventListener('resize', this.watchResize);
    }
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.fc-llgreen {
  color: #71DB78
}
.bd1-llgreen{border:1px solid #71DB78;}
.fc-lgreen {
  color: #6DDC73;
}
.hh102 {
  height: 2.55rem;
}
.answerBg {
  background-image: url("../../../assets/i/wap/qa/answerBg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.spacing0 {
  letter-spacing:0;
}
.hhAtuto {
  height: auto;
}
.bs-white {
  box-shadow: -22px 0px 0px 0px rgba(255,255,255,0.5);
}
.bg-ed {
  background-color: #EDEDED;
}
.vux-popup-picker-value {
  color: #666 !important;
}
.vux-cell-box {
  width: 100%;
}
.left100p {
 left: 100%
}
.c-mt-08{
  margin-top:-0.8rem ;
}
.bg-FF300C-10 {
  background-image: linear-gradient(270deg, #FEF2EB 0%, #FCE9F6 100%);
}
.personInfo{
  background: #F5F7FA;
}
</style>